<script setup>
import { ref, onMounted } from 'vue';
import Profile from '@/views/Front/Home components/Profile.vue';
import { Calendar } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
// const articles = [
//   {
//     id: 1,
//     title: '关闭浏览器输入法自带的组件和弹窗',
//     date: '2024-11-23',
//     image: '/images/article1.jpg'
//   },
//   {
//     id: 2,
//     title: '购置了新域名',
//     date: '2024-11-22',
//     image: '/images/article2.jpg'
//   },
//   {
//     id: 3,
//     title: '更新日志',
//     date: '2024-10-14',
//     image: '/images/article3.jpg'
//   },
//   {
//     id: 4,
//     title: 'CICD注意事项',
//     date: '2024-10-13',
//     image: '/images/article4.jpg'
//   }
// ]

import { storeToRefs } from 'pinia'
import { useArticleStore } from '@/stores/articleStore'
const articleStore = useArticleStore()
const {
  allArticles
} = storeToRefs(articleStore)
onMounted(() => {
  articleStore.fetchAllArticles()
})

const router = useRouter();

const navigateToArticle = (articleId) => {
  router.push('/articleView');
}
</script>
<template>
  <div class="Home-page-header">
    <!-- 左侧头像姓名和链接 -->
    <div class="Home-page-header-left">
      <!-- <div class="profile-info">
        <el-avatar shape="square" :fit="fill" :src="creatorInfo.userPic" :size="200" crossorigin="anonymous"/>
          <div class="user-details">
            <div class="nickname">{{ creatorInfo.nickname }}</div>

            <div class="follow">

           <el-button type="primary" size="small" class="follow-btn" @click="handleClick">+加关注</el-button>
            </div>
          </div>
      </div> 非card写法 -->
      <!-- <el-card class="profile-info" shadow="never">
        <el-avatar shape="square" :fit="fill" :src="creatorInfo.userPic" :size="190" crossorigin="anonymous"/>
          <div class="user-details">
             <div class="nickname">
              {{ creatorInfo.nickname }}
            </div>
            <div class="talk">
              摸鱼摸鱼
            </div>
            <div class="follow">
              <el-button type="primary" size="small" class="follow-btn" @click="handleClick">
                <img src="@/assets/images/bilibili.png" alt="Follow Icon" class="bilibili-icon" />
              </el-button>
              <el-button type="primary" size="small" class="follow-btn" @click="handleClick">
                <img src="@/assets/images/github.png" alt="Follow Icon" class="github-icon" />
              </el-button>
   
            </div>
          </div>
      </el-card> -->
      <Profile/>
    </div>  
    <!-- 右侧文章 -->
    <div class="Home-page-header-right">
      <div class="article-grid">
        <el-card 
          v-for="article in allArticles.slice(0, 4)" 
          :key="article.id"
          class="article-card"
          :body-style="{ padding: '0px' }"
          shadow="hover"
          @click="navigateToArticle(article.id)"
        >
          <div class="article-content">
            <el-image 
              :src="article.image" 
              fit="cover"
              class="article-image"
            />
            <div class="article-info">
              <h3 class="article-title">{{ article.title }}</h3>
              <div class="article-date">
                <el-icon><Calendar /></el-icon>
                {{ article.createTime }}
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<style scoped>
.Home-page-header {
  margin: 20px 20vw 20px 20vw;
  height: 40%;
  /* background-color: aqua; */
  display: flex;

  .Home-page-header-left {
    width: 20%;
    /* background-color: rgb(174, 174, 174); */
    /* border-radius: 10px; */
    display: flex;
    align-items: center;


  }

  .Home-page-header-right {
    margin-left: 10px;
    width: 80%;

    /* background-color: rgb(252, 157, 157); */
    :deep(.el-card) {
      border: none;
      background-color: #1c1c1c;
    }

    :deep(.el-card__body) {
      padding: 0;
      height: 100%;
    }

    .article-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      width: 100%;
      height: 100%;
      max-width: 1200px;
      margin: 0 auto;

      .article-card {
        margin: 0;
        background-color: rgb(083, 082, 085);
        border: none;
        transition: transform 0.3s ease;

        .article-content {
          position: relative;
          overflow: hidden;
          display: flex;
          width: 100%;
          height: 100%;

          .article-image {
            width: 50%;
            height: 100%;
            object-fit: cover;
          }

          .article-info {
            width: 50%;
            padding: 15px;
            color: #fff;

            .article-title {
              margin: 0;
              font-size: 1.1rem;
              font-weight: 500;
              color: #fff;
              margin-bottom: 10px;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
              line-height: 1.4;
              height: 1.4em;
            }

            .article-date {
              display: flex;
              align-items: center;
              gap: 5px;
              font-size: 0.9rem;
              color: #999;
            }
          }
        }
      }
    }

    .article-card:hover {
      transform: translateY(-5px);
    }

    /* 响应式布局 */
    /* @media screen and (max-width: 768px) {
      .article-grid {
        grid-template-columns: 1fr;
      }
    } */
  }

}
</style>